<template>
  <div class="export-config">
    <el-form :model="exportForm" ref="exportForm" label-width="100px">
      <el-form-item label="导出格式">
        <el-radio-group v-model="exportForm.format">
          <el-radio label="xlsx">Excel (.xlsx)</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="导出字段">
        <div class="field-selection">
          <div class="field-header">
            <el-checkbox 
              :indeterminate="isIndeterminate" 
              v-model="checkAll" 
              @change="handleCheckAllChange"
            >
              全选
            </el-checkbox>
            <span class="field-count">已选择 {{ selectedFields.length }} / {{ exportFields.length }} 个字段</span>
          </div>
          
          <el-checkbox-group v-model="selectedFields" @change="handleCheckedFieldsChange">
            <div class="field-grid">
              <el-checkbox 
                v-for="field in exportFields" 
                :key="field.key" 
                :label="field.key"
                class="field-item"
              >
                {{ field.label }}
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </el-form-item>
      
      <el-form-item label="导出范围">
        <el-radio-group v-model="exportForm.scope">
          <el-radio label="current">当前搜索结果</el-radio>
          <el-radio label="all">全部数据</el-radio>
        </el-radio-group>
        <div class="scope-desc">
          <span v-if="exportForm.scope === 'current'">将导出当前搜索条件下的所有数据</span>
          <span v-else>将导出所有操作记录数据（可能数据量较大）</span>
        </div>
      </el-form-item>
      
      <el-form-item label="数据限制">
        <el-input-number 
          v-model="exportForm.maxRows" 
          :min="1" 
          :max="50000" 
          :step="1000"
          controls-position="right"
          style="width: 200px;"
        />
        <span class="input-desc">最多导出行数（建议不超过10000行）</span>
      </el-form-item>
    </el-form>
    
    <div class="export-preview">
      <h4>导出预览</h4>
      <div class="preview-info">
        <div class="info-item">
          <span class="label">格式：</span>
          <span class="value">{{ exportForm.format.toUpperCase() }}</span>
        </div>
        <div class="info-item">
          <span class="label">字段数：</span>
          <span class="value">{{ selectedFields.length }} 个</span>
        </div>
        <div class="info-item">
          <span class="label">预估大小：</span>
          <span class="value">{{ estimatedSize }}</span>
        </div>
      </div>
    </div>
    
    <div class="export-actions">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="selectedFields.length === 0">
        确认导出
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExportConfig",
  data() {
    return {
      exportForm: {
        format: 'xlsx',
        scope: 'current',
        maxRows: 10000
      },
      // 可导出的字段配置
      exportFields: [
        { key: 'logId', label: '记录ID' },
        { key: 'containerCode', label: '器具编码' },
        { key: 'operationType', label: '操作类型' },
        { key: 'operatorName', label: '操作人员' },
        { key: 'warehouseName', label: '操作仓库' },
        { key: 'operationTime', label: '操作时间' },
        { key: 'operationLocation', label: '操作位置' },
        { key: 'operationDetail', label: '操作详情' },
        { key: 'remark', label: '备注' }
      ],
      // 选中的字段
      selectedFields: [],
      // 全选状态
      checkAll: false,
      // 半选状态
      isIndeterminate: false
    };
  },
  computed: {
    estimatedSize() {
      const fieldCount = this.selectedFields.length;
      const rowCount = this.exportForm.maxRows;
      const estimatedBytes = fieldCount * rowCount * 20; // 估算每个字段平均20字节
      
      if (estimatedBytes < 1024) {
        return estimatedBytes + ' B';
      } else if (estimatedBytes < 1024 * 1024) {
        return Math.round(estimatedBytes / 1024) + ' KB';
      } else {
        return Math.round(estimatedBytes / (1024 * 1024)) + ' MB';
      }
    }
  },
  created() {
    // 默认选中常用字段
    this.selectedFields = [
      'logId', 'containerCode', 'operationType', 'operatorName', 
      'warehouseName', 'operationTime', 'remark'
    ];
    this.updateCheckAllStatus();
  },
  methods: {
    handleCheckAllChange(val) {
      this.selectedFields = val ? this.exportFields.map(field => field.key) : [];
      this.isIndeterminate = false;
    },
    
    handleCheckedFieldsChange(value) {
      this.updateCheckAllStatus();
    },
    
    updateCheckAllStatus() {
      const checkedCount = this.selectedFields.length;
      this.checkAll = checkedCount === this.exportFields.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.exportFields.length;
    },
    
    handleConfirm() {
      if (this.selectedFields.length === 0) {
        this.$message.warning('请至少选择一个导出字段');
        return;
      }
      
      const config = {
        format: this.exportForm.format,
        scope: this.exportForm.scope,
        maxRows: this.exportForm.maxRows,
        selectedFields: this.selectedFields
      };
      
      this.$emit('confirm', config);
    },
    
    handleCancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.export-config {
  padding: 20px;
}

.field-selection {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
  background-color: #fafafa;
}

.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.field-count {
  color: #606266;
  font-size: 14px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.field-item {
  margin-right: 0;
  margin-bottom: 10px;
}

.scope-desc {
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
}

.input-desc {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.export-preview {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.export-preview h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 14px;
}

.preview-info {
  display: flex;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  color: #606266;
  margin-right: 5px;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.export-actions {
  margin-top: 20px;
  text-align: right;
}

.export-actions .el-button {
  margin-left: 10px;
}
</style> 